<template>
  <div>
        <h1>axios和json综合</h1>
        <input type="button" value="请求和响应都是普通字符串" @click="method01()"> <br>
        <input type="button" value="响应数据改成json字符串" @click="method02()"> <br>
        <input type="button" value="请求数据也改成json字符串" @click="method03()"> <br>
        <hr>
        <h3>好友列表</h3>
        <div id="messageDiv"></div>
        <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr> -->
        </table>
  </div>
       
</template>

<script>
import axios from 'axios'
export default {
  methods: {
    //1.请求和响应都是普通字符串
    method01(){
       let url="/M1Servlet";
       let params="username=柳岩&password=1234";
       axios.post(url,params)
            .then(resp=>{
              console.log(resp.data);
            });
    },
    //2.请求是普通字符串，响应数据改成json字符串
    //后端响应关于好友的json数据，然后前端接收并放到上述table标签文本中
    method02(){
         let url="/M2Servlet";
         let params="username=柳岩&password=1234";
         //2.3发送异步请求
         axios.post(url,params)
              .then(resp=>{
                 let arr=resp.data;
                 let content="";
                 for (let f of arr) {
                  content+=`<tr>
                               <th>${f.id}</th>
                               <th>${f.name}</th>
                               <th>${f.age}</th>
                                    </tr>`
                 }
                 document.getElementById("myTable").innerHTML+=content
              });


    },
    //3.请求是json字符串，响应数据改成json字符串
    // method03(){
    //      //2.1准备url
    //      let url="/ajaxJsonTest03Servlet";
    //      //2.2准备请求参数
    //      let params={"username":"迪丽热巴","password":"1234"};
    //      //2.3发送异步请求
    //      axios.post(url,params)
    //           .then(resp=>{
    //              //console.log(resp.data);
    //              //2.4 定义变量接收后端响应额json数组
    //              let arr = resp.data;//[{},{},{}]
    //              //2.5定义变量保存从数组中取出的每行数据
    //              let content="";
    //              //2.6遍历数组arr
    //              for(let f of arr){
    //                 //2.7取出的内容拼接到变量content
    //                 content+=`<tr>
    //                               <td>${f.id}</td>
    //                               <td>${f.name}</td>
    //                               <td>${f.age}</td>
    //                            </tr>`;
    //              }
    //              //2.8将content内容放到table标签中
    //              document.getElementById("myTable").innerHTML += content;
    //           });
    // }


    method03(){
      let url="/M3Servlet";
      let params={"username":"刘岩","password":"1234"};
      axios.post(url,params).then(resp=>{
          let obj=resp.data;
          if(obj.flag){
             document.getElementById("messageDiv").innerHTML=obj.message;
             let arr=obj.valueData;
             let content="";
            for (let f of arr) {
                  content+=`<tr>
                               <th>${f.id}</th>
                               <th>${f.name}</th>
                               <th>${f.age}</th>
                                    </tr>`
                 }
                 document.getElementById("myTable").innerHTML+=content;

          }else{
              document.getElementById("messageDiv").innerHTML=obj.message;
          }


      })
                 
              }
           }

}
</script>

<style>

</style>